<template>
  <div class="details">
    <a href="#/" class="ico-home"></a>
    <div class="title">
      <div class="tt" v-html="detailData.name"></div>
      <div class="sub-tt" v-html="detailData.title"></div>
    </div>
    <div class="details-banner">
      <mt-swipe :auto="4000">

        <mt-swipe-item class="slide" v-for="(item,index) in detailData.images" :key="index">

          <!--<a :href="javascript:;">-->
            <img :src="item.popup" alt="">
          <!--</a>-->
        </mt-swipe-item>

        <!---->
        <!--<mt-swipe-item class="slide">-->
        <!--<a href="#">-->
        <!--<img src="https://dummyimage.com/750x530" alt="">-->
        <!--</a>-->
        <!--</mt-swipe-item>-->
        <!--<mt-swipe-item class="slide">-->
        <!--<a href="#">-->
        <!--<img src="https://dummyimage.com/750x530" alt="">-->
        <!--</a>-->
        <!--</mt-swipe-item>-->
        <!---->
      </mt-swipe>
      <!--<router-link :to="'/'" ><img src="../../assets/details/bigImg.jpg"/></router-link>-->
    </div>
    <div class="price clearfix">
      <div class="fl left">
        <img :src="detailData.manufacturer_logo"/>
      </div>
      <div class="fr">
        <div class="one">{{detailData.price}}</div>
        <!--{{discounts[0].price}} {{discounts[0].quantity}}-->
        <!--<div class="two"><b >4折</b> <span v-if="discounts[0].price">{{discounts[0].price}}</span></div>-->

      </div>
    </div>
    <div class="directMail">
      <ul class="top clearFix">
        <li>
          <a :href="publicLink0">
            <img src="../../assets/details/d-top1.png"/>
            <p>女神直邮</p>
          </a>
        </li>
        <li>
          <a :href="publicLink1">
            <img src="../../assets/details/d-top2.png"/>
            <p>专业鉴定</p>
          </a>
        </li>
        <li>
          <a :href="publicLink2">
            <img src="../../assets/details/d-top3.png"/>
            <p>交易保障</p>
          </a>
        </li>
      </ul>
      <ul class="bottom clearFix">
        <li>
          <a :href="publicLink3">
            <p>鉴定师团</p>
            <span>12人</span>
          </a>
        </li>
        <li>
          <a :href="publicLink4">
            <p>品质商品</p>
            <span>1000件</span>
          </a>
        </li>
        <li>
          <a :href="publicLink5">
            <!---->
            <p>线下体验店</p>
            <span>3家</span>
          </a>
        </li>
      </ul>
      <div class="right" @click="gotoAddress({path:'/me/store'})">
        <img src="../../assets/details/d-right.png"/>
      </div>
    </div>
    <div class="introduce box">
      <div class="title">
        产品规格
      </div>
      <div class="bottom">
        <!--<div v-html="detailData.description"></div>-->
        <div class="in-li">
          <span>品牌：</span><span v-html="detailData.manufacturers"></span>
          <!--<b class="eye"></b>-->
        </div>
        <div class="in-li">
          <span>ID：</span><span v-html="detailData.product_id"></span>
        </div>
        <!--<div class="in-li"><span>品类：</span>gucci</div>-->
        <!--<div class="in-li"><span>尺寸：</span>gucciguccigucci</div>-->
        <!--<div class="in-li"><span>产地：</span>gucci</div>-->
        <!--<div class="in-li"><span>颜色：</span>gucci</div>-->
        <!--<div class="in-li"><span>款式：</span>gucci</div>-->
        <div class="in-li" v-if="showChengse">
          <span>{{detailData.attribute_groups[0].name}}：</span>
          {{detailData.attribute_groups[0].attribute[0].name}}
          <!--<b class="mark"></b>-->
        </div>
        <div class="in-li key" v-if="tagShow" v-for="item in tags">
          <em>{{item.tag}}</em>
          <!--<em>手提包</em>-->
        </div>
        <div class="in-li" v-if="showShoucangUser"><span>收藏此宝贝</span></div>
        <div class="user-list" v-if="showShoucangUser">
          <img :src="'http://api.piver.cn/image/users/'+item.customer_id+'.jpg'" class="photo" alt=""
               v-for="item in usersData.list" @click="gotoAddress({path:'/otherIndex?id='+item.customer_id})">
          <!--customer_id   avatar-->
          <!--<img src="https://dummyimage.com/100x100" class="photo" alt="">-->

        </div>
      </div>

    </div>
    <div class="recommend box">
      <div class="title">
        卖家寄语
      </div>
      <div class="bottom">
        <div class="text">
          <div class="jiyu-box" v-html="detailData.saleword"></div>
          <!--斜挎包大号，比小号容量更大，可单肩可斜挎，可逛街，也可当作旅行包使用可单肩可斜挎，可逛街，也可当作旅行包使用,可单当作旅行包使用-->
          <!--<b class="open"></b>-->
        </div>
      </div>
    </div>
    <div class="recommend box">
      <div class="title">
        女神建议
      </div>
      <div class="bottom">
        <div class="text">
          <div v-html="detailData.advice"></div>
          <!--斜挎包大号，比小号容量更大，可单肩可斜挎，可逛街，也可当作旅行包使用可单肩可斜挎，可逛街，也可当作旅行包使用,可单当作旅行包使用-->
          <!--<b class="open"></b>-->
        </div>
      </div>
    </div>
    <div class="evaluate box">
      <div class="title">
        评价
      </div>
      <div class="no-pj" v-if="!haveComments">暂无评价</div>
      <div class="bottom discuss-box" v-if="haveComments">

        <div class="list clearfix" v-for="item in comments">
          <div class="fl">
            <img :src="'http://api.piver.cn/image/users/'+item.customer_id+'.jpg'"
                 @click="gotoAddress({path:'/otherIndex?id='+item.customer_id})" class="photo-ico" />
          </div>
          <!--<dl class="fl" @click="popUpReplayFn(item.firstname,item.id)">-->
            <!--<dt>{{item.firstname}}</dt>-->
            <!--<dd>{{item.content}}</dd>-->
          <!--</dl>-->
          <div class="fc">
            <div class="my-discuss-box" @click="popUpReplayFn(item.firstname,item.id)">
              <div class="name">{{item.firstname}}</div>
              <div class="replay">{{item.content}}</div>
              <div class="time">{{item.date_added}}</div>

            </div>
            <div class="other-discuss-box" v-if="item.child&&item.child.length">
              <div class="other-d-b" v-for="value in item.child">
                <div class="discuss-other-photo">
                  <span class="photo-other">
                    <img class="photo-ico" :src="'http://api.piver.cn/image/users/'+value.customer_id+'.jpg'" @click="gotoAddress({path:'/otherIndex?id='+value.customer_id})"/>
                    <!---->

                  </span>
                  <span class="name">{{value.firstname}}</span>
                </div>
                <div class="replay">{{value.content}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pj-from-box">
        <div class="textarea"><textarea name="" placeholder="添加评价" v-model="content"></textarea></div>
        <div>
          <mt-button type="danger" size="small" v-on:click="commentAdd">提交评价</mt-button>
        </div>
      </div>


    </div>
    <div class="similar box">
      <div class="title">
        同类产品
      </div>
      <div class="bottom">
        <ul class="clearFix">
          <li v-for="item in detailData.products">
            <div class="img"><a @click="redirect(item.product_id)"><img :src="item.thumb" alt=""></a></div>

            <div class="rec-t"><a @click="redirect(item.product_id)"><p>{{item.name}}</p></a></div>
            <div class="rec-price">{{item.price}}</div>
          </li>
        </ul>
      </div>
    </div>
    <footer class="footer">
      <ul class="clearFix">
        <li @click="gotoAddress('/me/msgtalk?id='+customer_id)">
          <!--<a href="#/me/msgtalk">-->
            <img src="../../assets/details/footer1.png"/>
            <p>联系卖家</p>
          </a>
        </li>
        <li :class="{'shoucang-active':sc}" @click="addShouCang(detailData.product_id)">
          <!---->
          <!--换成星星 -->
          <img src="../../assets/content/icoa3.png" v-if="!sc"/>
          <img src="../../assets/content/icoa3-ac.png" v-if="sc"/>
          <p>收藏</p>
        </li>
        <li @click="addCart" class="shopcart">
          <img src="../../assets/details/footer3.png"/>
          <p>加购物车</p>
        </li>
        <li class="buy" >
          <!--<img src="../../assets/details/footer4.png"/>-->
          <mt-button type="danger" size="small" @click="buyFn">立即购买</mt-button>

        </li>
      </ul>
      <div class="back" @click="scrollTop">
        <img src="../../assets/details/footer-top.png"/>
      </div>
    </footer>

    <!--<span class="detail-buy"></span>-->
    <span class="detail-buy" v-on:click="gotoAddress('/me/shopping')">
      <i v-if="cartNum !=0" class="mint-badge is-success is-size-small">{{cartNum}}</i>
    </span>
    <mt-popup v-model="popupVisible" position="bottom" class="mint-popup-3" :modal="false">
      <div class="pop-box">
        <div class="txt-box clearfix">
          <div class="fl">回复{{usernameByComment}}：</div>
          <div class="fc"><input  type="text" class="text" v-model="replayContent" placeholder="请输入您的评论内容" v-blurs="{hideReplay:hideReplay}"></div>
        </div>
        <div class="send-box">
          <span class="send-btn" @click="submitReplayContent()">发表</span>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui';
  export default {
    name: 'Details',
    data () {
      return {
        detailData: {},
        discounts: {},
        usersData: {},
        showChengse: false,
        comments: [],
        haveComments: false,
        content: '',
        sc: false,
        cartNum: 0,
        publicLink0: '',
        publicLink1: '',
        publicLink2: '',
        publicLink3: '',
        publicLink4: '',
        publicLink5: '',
        showShoucangUser: false,
        token: sessionStorage.user && JSON.parse(sessionStorage.user).token || '',
        popupVisible: false,
        usernameByComment: "",
        replayContent:"",
        customer_id: '',
        tags:[],
        tagShow:false
      }
    },
    mounted: function () {
      sessionStorage.setItem('saleData', '');

      this.initData(this.$route.params.id);
      this.wishlist(this.$route.params.id);
      this.getComment();
      this.getWish();
      this.getCartNum();
    },
    components: {
      //productDetail
    },
    directives:{
      blurs:{
        bind(el,binding){
            el.addEventListener("blur",function(){
                binding.value.hideReplay();
            })
        }
      }
    },
    methods: {
      popUpReplayFn(username, id){

        this.usernameByComment = username;
        this.commentId = id;
        this.replayContent = "";
        let userName = sessionStorage.user && JSON.parse(sessionStorage.user).name;
        if (!this.token) {
          this.$router.push({
            path: '/login',
            query: {redirect: this.$route.fullPath}
          });
          return;
        }
        if (userName === this.usernameByComment) {
          Toast("不能评论自己的评论");
          this.popupVisible = false;
          return;
        }
        this.popupVisible = true;
      },
      hideReplay(){
        this.popupVisible = false;
      },
      addCart: function () {
        var _this = this;
        if (_this.token == '') {
//          _this.$router.push('/login');
          _this.$router.push({path: '/login', query: {redirect: location.hash.replace('#', '')}});
          return;
        }


        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.product_id = this.$route.params.id;
        ajaxData.quantity = 1;
        $.ajax({
          type: 'post',
          url: RouteMap.cardAdd,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {

              Toast("添加成功");
              _this.getCartNum();

            }
            else {
              //Toast(res.msg)
            }
          }
        })

      },
      scrollTop: function () {
//        $('body').scrollTop(0);
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;

      },
      initData: function (id) {

        $('body').scrollTop(0);
        var productId = id;
        var _this = this;

        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.product_id = productId;

        setTimeout(function () {

          $.ajax({
            type: 'get',
            url: RouteMap.productDetail,
            data: ajaxData,
            success: function (res) {
              if (res.code == 200) {

                _this.detailData = res.data;
//                console.log(_this.detailData);
                _this.discounts = res.data.discounts;
								_this.customer_id = res.data.contacts_customer_id;
                _this.publicLink0 = res.data.desc_bar[0].link;
                _this.publicLink1 = res.data.desc_bar[1].link;
                _this.publicLink2 = res.data.desc_bar[2].link;
                _this.publicLink3 = res.data.desc_bar[3].link;
                _this.publicLink4 = res.data.desc_bar[4].link;
                _this.publicLink5 = res.data.desc_bar[5].link;

                if (_this.detailData.attribute_groups.length > 0) {
                  _this.showChengse = true;
                }

                if(_this.detailData.tags.length>0){
                  _this.tagShow=true;
                  _this.tags=_this.detailData.tags;

                }
              }
              else {
                //Toast(res.msg)
              }
            }
          })
        })
//      if(this.discounts[0][quantity]){
//        this.show1 = true;
//      }
//
//      if(this.discounts[0].price){
//        this.show2 = true;
//      }
      },
      wishlist: function (id) {
        var productId = id;
        var _this = this;

        var ajaxData = {};
        ajaxData.product_id = productId;
        $.ajax({
          type: 'post',
          url: RouteMap.wishListUsers,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {
              _this.usersData = res.data;
              if (_this.usersData.list.length > 0) {
                _this.showShoucangUser = true;
              }
            }
            else {
              //Toast(res.msg)
            }
          }
        })

      },
      redirect: function (id) {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;

        this.initData(id);
        this.$router.push({path: '/shop/details/' + id});

      },
      gotoAddress(path){
        this.$router.push(path)
      },
      buyFn: function () {

        var isLogin = sessionStorage.user && JSON.parse(sessionStorage.user).login || 0;
        if (!isLogin) {

          this.$router.push({path: '/login', query: {redirect: location.hash.replace('#', '')}});
        }
        else {
          var productId = this.$route.params.id;
          var cardAddData = {};
          cardAddData.product_id = productId;
          cardAddData.quantity = 1;
          cardAddData.type = 1;
          cardAddData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
          var _this = this;

          $.ajax({
            type: 'post',
            url: RouteMap.cardAdd,
            data: cardAddData,
            success: function (res) {
              if (res.code == 200 || res.code == 203) {

                _this.$router.push({path: '/me/order?productId=' + _this.$route.params.id});

              }
              else {
                Toast(res.msg);
              }
            }
          })

        }
      },
      submitReplayContent(){
        if (this._checkoutReplayContent()) {
          let ajaxData = {};
          ajaxData.token = this.token;
          ajaxData.id = this.commentId;
          ajaxData.type = 1;
          ajaxData.content = this.replayContent;
          this.sendContent(ajaxData);
        }
        this.popupVisible = false;
      },
      _checkoutReplayContent(){
        if (this.replayContent === "请输入您的评论内容") {
          Toast("请输入您的评论内容");
          return false;
        }
        else if (this.replayContent.length < 5 && this.replayContent.length > 0) {
          Toast("评论内容必须超过5个字");
          return false;
        }
        else if (this.replayContent.length === 0) {
          Toast("评论不能为空");
          return false;
        }
        return true;
      },
      sendContent(ajaxData){
        let _this = this;
        setTimeout(function () {
          $.ajax({
            type: 'post',
            url: RouteMap.commentAdd,
            data: ajaxData,
            success: function (res) {
              if (res.code == 200) {
                _this.getComment();
                _this.content = '';
                Toast('评论成功');
              }
              else {
                //Toast(res.msg);
              }
            },
            error: function () {
              Toast("评论失败");
            }
          })
        })
      },
      getComment: function () {
        var productId = this.$route.params.id;
        var _this = this;

        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.id = productId;
        ajaxData.type = 2;

        setTimeout(function () {

          $.ajax({
            type: 'post',
            url: RouteMap.comments,
            data: ajaxData,
            success: function (res) {
              if (res.code == 200) {
                if (res.data.list && res.data.list.length > 0) {
                  _this.haveComments = true;
                  _this.comments = res.data.list;
                }
                else {
                  _this.haveComments = false;
                }
              }
              else {
                //Toast(res.msg)
              }
            }
          })
        })
      },
      commentAdd: function () {
        //commentAdd
        var _this = this;
        if (_this.token == '') {
          Toast("请您登录后评论")
          _this.$router.push({path: '/login', query: {redirect: location.hash.replace('#', '')}});
          return;
        }


        var productId = this.$route.params.id;

        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.id = productId;
        ajaxData.type = 2;
        ajaxData.content = _this.content;
        setTimeout(function () {

          $.ajax({
            type: 'post',
            url: RouteMap.commentAdd,
            data: ajaxData,
            success: function (res) {
              if (res.code == 200) {
                _this.getComment();
                _this.content = '';
                Toast('评论成功');
              }
              else {
                //Toast(res.msg)
              }
            }
          })
        })
      },

//  添加收藏 取消收藏 获取收藏列表 点亮收藏图标
      getWish: function () {
        var ajaxData = {};
        var id = this.$route.params.id;

        var arr = [];
        var arr2 = [];
        var _this = this;
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        if (!ajaxData.token) {
          return;
        }
        $.ajax({
          type: 'post',
          url: RouteMap.wishlistGet,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {
              arr = res.data.products;
              for (var i = 0; i < arr.length; i++) {
                arr2.push(arr[i].product_id);
              }
              var i = arr2.length;
              while (i--) {
                if (arr2[i] === id) {
                  _this.sc = true;
                  return;
                }
              }

            }
            else {
              //Toast(res.msg)
            }
          }
        })


      },

      addWishlist: function (id) {
        var _this = this;

        if (_this.token == '') {

          _this.$router.push({path: '/login', query: {redirect: location.hash.replace('#', '')}});
          return;
        }


        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.product_id = id;
        $.ajax({
          type: 'post',
          url: RouteMap.wishlistAdd,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {

              Toast("收藏成功");
              _this.sc = true;


            }
            else {
              //Toast(res.msg)
            }
          }
        })
      },
      removeWishlist: function (id) {
        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.product_id = id;
        var _this = this;
        $.ajax({
          type: 'post',
          url: RouteMap.wishlistRemove,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {

              Toast("取消收藏");
              _this.sc = false;

            }
            else {
              //Toast(res.msg)
            }
          }
        })

      },

      addShouCang: function (id) {
        if (!this.sc) {
          this.addWishlist(id);
        } else {
          this.removeWishlist(id);
        }
      },
      getCartNum: function () {
        var token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        var _this = this;
        if (!token) {
          return;
        }
        var ajaxData = {};
        ajaxData.token = token;

        setTimeout(function () {
          $.ajax({
            type: 'post',
            url: RouteMap.cartNum,
            data: ajaxData,
            cache: false,
            success: function (res) {
              if (res.code == 200) {

                _this.cartNum = res.data.num;

              }
              else {
                //Toast(res.msg)
              }
            }
          })
        }, 100)

      }


    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
  .details {
    background: #fff;
    padding-bottom: 2.09rem;
  }

  .title {
    text-align: center;
    padding-left: .64rem;
    padding-right: .64rem;
  }

  .title .tt {
    font-size: .68rem;
    padding-bottom: .2rem;
    line-height: 1rem;
    font-weight: bold;
    color: #1b1b1b;
    padding-top: 1rem;
  }

  .title .sub-tt {
    font-size: .6rem;
    padding-bottom: .85rem;
    color: #707070;
    line-height: .8rem;
  }

  .details-banner {
    padding-left: .64rem;
    padding-right: .64rem;
  }

  .banner img {
    width: 14.68rem;
    height: 17.66rem;
  }

  .details .price {
    padding: .64rem 1.06rem;
  }

  .details .price .left {
    margin-top: .1rem;
  }

  .details .price .left img {
    height: 2rem;
  }

  .details .price .one {
    font-size: 1.02rem;
    color: #b01f24;
  }

  .details .price .two {
    font-size: .43rem;
    color: #b01f24;
    text-align: right;
  }

  .details .price .two span {
    font-size: .55rem;
    color: #c2c2c2;
    text-decoration: line-through;
    padding-left: .21rem;
  }

  .directMail {
    background: url("../../assets/details/direct-bg.png") no-repeat;
    width: 14.6rem;
    height: 6.34rem;
    background-size: 100% 100%;
    margin-left: .64rem;
    margin-bottom: 1.91rem;
  }

  .directMail ul {
    /*padding-left: .85rem;*/
    width:100%;
    display: flex;
    justify-content: space-between;
    /*justify-content: space-around;*/
    align-items:center;
  }

  .directMail ul li {
    /*float: left;*/
    width:30%;
    text-align: center;
    /*padding: .53rem 2.68rem 0 0;*/
    font-size: .51rem;
  }

  .directMail ul li:last-child {
    /*padding-right: 0;*/
  }

  .directMail ul li img {
    height: 1.04rem;
  }

  .directMail ul.top {
    height: 3.15rem;
    border-bottom: 2px solid #fff;
  }

  .directMail ul.top li p {
    padding-top: .34rem;
    color: #b01f24;
  }

  .directMail ul.bottom{
    height: 3.15rem;

  }
  .directMail ul.bottom li p {
    padding: 0.21rem 0 .34rem;
    color: #1b1b1b;
  }

  .directMail ul.bottom li span {
    color: #1b1b1b;
    font-size: .76rem;
    font-weight: 100;
  }

  /*.directMail ul.bottom li:nth-child(2) {*/
    /*margin-left: -0.18rem;*/
  /*}*/

  /*.directMail ul.bottom li:last-child {*/
    /*margin-left: -0.44rem;*/
  /*}*/

  .directMail {
    position: relative;
  }

  .directMail .right {
    position: absolute;
    bottom: .9rem;
    right: .2rem;
  }

  .directMail .right img {
    width: .38rem;
    height: .7rem;
  }

  .box {
  }

  .box .title {
    width: 4.79rem;
    margin: 0 auto;
    font-size: .6rem;
    font-weight: bold;
    color: #1b1b1b;
    text-align: center;
    background: url("../../assets/details/introduce-title.png") no-repeat left center;
    background-size: 100%;
    margin-bottom: 1.38rem;
  }

  .box .bottom {
    padding-bottom: 1.19rem;
    margin: 0 auto;
  }

  .box .bottom .in-li {
    font-size: .6rem;
    color: #1b1b1b;
    padding-bottom: .64rem;
    text-align: center;
  }

  .box .bottom .in-li span {
    color: #707070;
  }

  .box .bottom .in-li .eye {
    background: url("../../assets/details/introduce1.png") no-repeat;
    width: .74rem;
    height: .47rem;
    background-size: 100% 100%;
    display: inline-block;
    margin-left: .43rem;
  }

  .box .bottom .in-li .mark {
    background: url("../../assets/details/introduce2.png") no-repeat;
    width: .7rem;
    height: .7rem;
    background-size: 100% 100%;
    display: inline-block;
    margin-bottom: -0.16rem;
    margin-left: .43rem;
  }

  .box .bottom .in-li.key {
    font-size: .43rem;
    color: #1b1b1b;
    padding: .42rem 0 1.06rem;
  }

  .box .bottom .in-li.key em {
    background: #f5f5f5;
    border-radius: .28rem;
    padding: .19rem;
    margin: 0 .19rem;
  }

  .box .bottom .text {
    width: 7.2rem;
    margin: 0 auto;
    text-align: left;
    font-size: .6rem;
    color: #707070;
    line-height: .8rem;
    position: relative;
    /*display: -webkit-box;*/
    /*-webkit-box-orient: vertical;*/
    /*-webkit-line-clamp: 5;*/
    /*overflow: hidden;*/
  }

  .box .bottom .text .open {
    position: absolute;
    bottom: 0.17rem;
    right: 0;
    background: url("../../assets/details/e-open.png") no-repeat;
    width: .96rem;
    height: .51rem;
    background-size: 100% 100%;
  }

  .evaluate .bottom {
    padding: 0 .64rem 0rem;
  }

  .people {
    padding: 1.21rem .74rem;
    border-bottom: 1px #c9c9ca solid;
  }

  .people:first-child {
    padding-top: 0;
  }

  .people img {
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 50%;
  }

  .people dl {
    width: 11.5rem;
    padding-left: .43rem;
  }

  .people dl dt {
    font-size: .55rem;
    color: #1b1b1b;
    padding: .36rem 0 .96rem;
  }

  .people dl dd {
    font-size: .6rem;
    color: #707070;
    line-height: .8rem;
  }

  .evaluate .bottom {
    position: relative;
  }

  .evaluate .all {
    position: absolute;
    bottom: 1.7rem;
    left: 4.57rem;
  }

  .evaluate .all img {
    width: 6.8rem;
    height: 1rem;
  }

  .similar .bottom {
    padding: 0 0 1.62rem 1.28rem;
  }

  .similar .bottom li {
    margin-right: .87rem;
    float: left;
    padding-bottom: .73rem;
  }

  .similar .bottom li .img img {
    width: 3.87rem;
    height: 3.87rem;
    border: 1px solid #000;
    margin-bottom: .43rem;
  }

  .similar .bottom li .rec-t {
    width: 3.87rem;
    height: 1.6rem;
    overflow: hidden;
  }

  .similar .bottom li .rec-t p {
    font-size: .43rem;
    line-height: .8rem;
    color: #707070;
  }

  .similar .bottom li .rec-price {
    font-size: .43rem;
    line-height: .8rem;
    color: #707070;
    padding-top: .3rem;
  }

  .footer {
    background: #f5f5f5;
    width: 100%;
    box-shadow: 0 -.1rem .1rem #ccc;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: .3rem 0;
  }

  .footer .back {
    position: absolute;
    top: -2.47rem;
    right: 0.55rem;
  }

  .footer .back img {
    width: 1.47rem;
    height: 1.47rem;
  }

  .footer ul {
    padding-left: 1.15rem;
  }

  .footer ul li {
    text-align: center;
    float: left;
    padding: .38rem 1.2rem 0.2rem 0;
  }

  .footer ul li img {
    width: .74rem;
  }

  .footer ul li.shopcart {
    padding-right: 0;
  }

  .footer ul li p {
    font-size: .43rem;
    color: #707070;
    padding-top: .2rem;
  }

  .footer ul li.buy {
    padding: .26rem .3rem 0 0;
    float: right;
    width: 4.34rem;
    height: 1.55rem;
  }

  .footer ul li.buy img {
    width: 100%;
    height: 100%;
  }

  .footer .shoucang {
  }

  .footer ul .shoucang-active p {
    color: #ef4f4f;
  }

  .mint-swipe {
    height: 18rem;
    color: #fff;
    font-size: 30px;
    text-align: center;
    background: #fff;
  }

  .slide {
    background-color: #fff;
    color: #fff;
  }

  .slide img {
    width: 100%;
  }

  .user-list {
    text-align: center;
    margin-top: -0.3rem;
  }

  .user-list .photo {
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    margin: .2rem .3rem;
  }

  .detail-buy {
    position: fixed;
    width: 1.5rem;
    height: 1.5rem;
    background: url("../../assets/shop/buy.png");
    background-size: 100% 100%;
    bottom: 5.7rem;
    right: .5rem;
  }

  .pj-from-box {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    padding: 1rem 0;
  }

  .pj-from-box textarea {
    border: 1px solid #ccc;
    width: 100%;
    padding: .3rem;
    font-size: .5rem;
    border-radius: .1rem;
    height: 2.5rem;
    box-sizing: border-box;
  }

  .pj-from-box {
    text-align: center
  }

  .no-pj {
    text-align: center;
  }

  .detail-buy i {
    position: absolute;
    right: -5px;
    top: -5px;
  }

  .jiyu-box {
    text-align: center;
  }

  .bottom .text div {
    text-align: center;
  }

  .mint-popup-3 {
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: .5rem;
  }

  .pop-box {
    padding: 0 .5rem;
  }

  .pop-box .txt-box {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #707070;
    border-radius: 0.3rem;
    height: 1.5rem;
    padding: 0 0.5rem;
  }

  .pop-box .txt-box .text {
    line-height: 1.5rem;
    height: 1.5rem;
    width: 8rem;
  }

  .pop-box .fl {
    line-height: 1.5rem;
    height: 1.5rem;
    color: #d2d2d2;
    width: 4rem;
    overflow-y: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pop-box .send-box {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.3rem;
  }
  .discuss-box {
    padding: 0 .8rem;
  }

  .discuss-box .list {
    margin-bottom: 1rem;
  }

  .discuss-box .list .fl {
    width: 2rem;

  }

  .discuss-box .list .fc {
    width: 11.5rem;
    margin-left: .5rem;
    line-height: 1rem;

  }

  .discuss-box .list .time {
    color: #c2c2c2;
  }

  .discuss-box .list .photo-ico {
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
  }
  .other-discuss-box {
    background: #f5f5f5;
    border-radius: .5rem;
    padding: .5rem;
    margin-top: .5rem;
  }

  .discuss-other-photo span {
    vertical-align: middle;
    display: inline-block;
  }

  .discuss-other-photo .ico1 img {
    vertical-align: middle;
    height: .3rem;
  }
  .other-d-b .replay{
    padding: 0.3rem 1.2rem;
  }
  .discuss-box .list .replay {
    padding: .3rem 0;
  }

  .discuss-box .list .more {
    padding-top: .3rem;
    color: #b01f24;
  }
  .discuss-box .list .time {
    color: #c2c2c2;
  }

  .discuss-box .list .photo-ico {
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
  }
  .mint-button--danger{
    background-color: #b01f24;
  }
</style>
